<template>
    <w-pop ref="pop">
        <div class="type_container">
            <div class="item" :class="item.active ? 'active' : ''" v-for="item in types" :key="item.id"
                @click="handlClickType(item)">
                {{ item.name }}
            </div>
        </div>
        <div class="footer" @click="handleComfirType">
            <w-button>确 认</w-button>
        </div>
    </w-pop>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch, getCurrentInstance } from 'vue'
import { getPrudoctTypes } from '@/api/mall'
export default defineComponent({
    emits: ["comfir"],
    setup(props, { emit }) {
        const pop = ref()
        const open = () => {
            init()
            pop.value.open()
        }
        const types = ref([])
        const init = async () => {
            const res = await getPrudoctTypes()
            if (res) {
                types.value = res
                types.value.forEach(el => el.active = false)
            }
        }
        const vm = getCurrentInstance()
        const handlClickType = (item) => {
            types.value.forEach(el => {
                if (el.id == item.id) {
                    el.active = !el.active
                    vm.proxy.$forceUpdate()
                }
            })


        }

        const handleComfirType = () => {
            const arr = types.value.filter(el => el.active)

            emit('comfir', arr)
            pop.value.close()
        }
        return {
            pop,
            types,
            open,
            init,
            handlClickType,
            handleComfirType
        }
    }
})
</script>
<style scoped lang='scss'>
.type_container {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin: 16px;
    display: flex;
    flex-direction: column;
    position: relative;

    .item {
        justify-content: center;
        line-height: 50px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        color: #666;

        font-family: Helvetica;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        padding-left: 16px;

        button {
            border: none;
            width: 100%;
            text-align: left;
            background-color: #fff;
        }

    }



    .active {
        // button {
        color: var(--el-color-primary);
        // }
    }

    .item:last-child {
        border: none;
    }


}

.footer {
    width: 100%;
    position: absolute;
    padding: 16px;
    bottom: 100px;

    button {
        width: 100%;
    }
}
</style>